<template>
  <el-card>
    <template #header>
      <div>refreshDeps【useRequest】</div>
    </template>
    <div style="margin-top: 16px">
      <div>
        <el-button type="button" @click="count++">
          count is {{ count }}
        </el-button>
        <div style="opacity: 0.6">count !==0 and count !==5 ready is true</div>
      </div>
      <br />
      <el-button @click="() => (id = 1)">Change ID = 1</el-button>
      <el-button @click="() => (id = 2)" style="margin-left: 16px">
        Change ID = 2
      </el-button>
      <el-button @click="() => (store.id = 1)" style="margin-left: 16px">
        Change store ID = 1
      </el-button>
      <el-button @click="() => (store.id = 2)" style="margin-left: 16px">
        Change store ID = 2
      </el-button>
    </div>
    <div style="margin-top: 16px">Loading：{{ loading ? "loading" : "" }}</div>

    <div style="margin-top: 16px">
      Data Value：
      <div>
        <table>
          <thead>
            <th>Time</th>
            <th>Id</th>
            <th>StoreId</th>
            <th>Count</th>
          </thead>
          <tbody>
            <tr>
              <th>{{ data?.time }}</th>
              <th>{{ data?.id }}</th>
              <th>{{ data?.storeId }}</th>
              <th>{{ data?.count }}</th>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </el-card>
</template>

<script setup>
  import { ref, reactive, computed } from "vue";

  import { useRequest } from "vue-hooks-plus";

  function getUsername({ id, storeId, count }) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          time: Date.now(),
          id,
          storeId,
          count,
        });
      }, 1000);
    });
  }
  const id = ref(1);
  const store = reactive({
    id: 1,
  });
  const count = ref(0);
  const ready = computed(() => count.value !== 0 && count.value !== 5);
  const { data, loading } = useRequest(
    () => getUsername({ id: id.value, storeId: store.id, count: count.value }),
    {
      initialData: {
        time: Date.now(),
        id: "-",
        count: "-",
        storeId: "-",
      },
      ready,
      refreshDeps: [id, () => store.id, count],
    }
  );
</script>
